<template>
  <div class="goods-items" @click="goToDetailsPage">
    <div class="left"><img :src="image" /></div>
    <div class="right">
      <div class="text">
        <h3 class="title">{{ title }}</h3>
        <p class="desc">{{ description }}</p>
        <div>
          <span class="price">
            ￥
            <span class="price-number">{{ price }}</span>
          </span>
        </div>
      </div>
      <div class="cart-btn">
        <van-button type="default" class="add_cart" @click.stop.native="addGoodsToCart" v-show="counter === 0"><i class="iconfont icon-gouwuche"></i></van-button>
        <my-input-number :count="counter" v-show="counter > 0" @changeNumberEvent="getOperator"></my-input-number>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'goods-items',
  props: ['itemId', 'image', 'title', 'description', 'price', 'quantity'],
  data() {
    return {
      goodsItems: {
        id: this.itemId,
        image: this.image,
        title: this.title,
        price: this.price
      }
    };
  },
  computed: {
    ...mapGetters(['carList']),

    counter() {

      let that = this;

      let result = 0;
      this.carList.some(item => {

        // console.log(item.productId +":"+ that.goodsItems.id)

        if (item.productId === that.goodsItems.id) {
          result += item.num;
          return true;
        }

      });

      return result;
    }

    // counter() {
    // 	let that = this;
    // 	let cartGoods = this.carList;
    // 	let result = 0;
    // 	cartGoods.some(good => {
    // 		if (good.id === that.itemId) {
    // 			result = good.quantity;
    // 		}
    // 	});
    // 	return result;
    // }
  },
  methods: {
    ...mapActions(['addGoods', 'addNum', 'jianNum', 'deleteGoodsFromCart']),
    addGoodsToCart() {
      this.addGoods(this.goodsItems);

      //	this.$store.commit('addGoodsToCart', this.goodsItems);
    },
    getOperator(op) {
      let id = this.goodsItems.id;

      if (op === 'plus') {
        this.addNum(id);
        //	this.$store.commit('addGoods', id);
      } else {
        let count = this.carList.filter(val => {
          return val.productId === id;
        })[0].num;

        if (count === 1) {
          this.deleteGoodsFromCart(id);
        } else {
          this.jianNum(id);
          //	this.$store.commit('reduceGoods', id);
        }
      }
    },
    goToDetailsPage() {
      this.$router.push({
        path: '/goodsViews',
        query: {
          goods_id: this.goodsItems.id
        }
      });
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/variable.scss";
.add_cart {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 2rem;
  border: 1px solid #333;
  line-height: 2.2rem;
  padding: 0;
  i {
    color: #333;
  }
}

.goods-items {
  height: 150px;
  width: 100%;
  font-size: 0;
  border-bottom: 1px solid #e4e7ed;
  background-color: #fff;
}

.goods-items > div {
  font-size: 13px;
  display: inline-block;
  vertical-align: middle;
}

.left {
  width: 40%;
  height: 100%;
  text-align: center;
}

.left > img {
  height: 80%;
  transform: translateY(10%);
}

.right {
  box-sizing: border-box;
  position: relative;
  height: 100%;
  width: 60%;
  text-align: left;
  .text {
    position: absolute;
    line-height: 24px;
    width: 80%;
    top: 50%;
    transform: translateY(-50%);
  }

  .title {
  }

  .price {
    color: $colorAccent;
    font-weight: bold;
    .price-number {
      font-size: 16px;
    }
  }

  .cart-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    i {
      font-weight: 600;
    }
  }
}
</style>
